<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p11_定位广告</title>
    <style>
        .top {
            background-color: #5AA4AE;
            height: 120px;
            /* 绝对定位:会脱离文档流 释放布局空间*/
            position: fixed;
            width: 100vw;
            top: 0;
        }
        .main {
            margin-top: 130px;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top:300px
        }
        .left {
            background-color: #FFF799;
            left: 20px;
        }
        .right {
            background-color: #F35336;
            right: 20px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus beatae corporis debitis eos eveniet,
        exercitationem hic illum ipsam iusto laudantium maxime minus molestiae nam optio quasi rerum unde vitae
        voluptate!
    </div>
    <div>Ad dolores eaque eum, molestias nemo non nulla quis ratione recusandae reprehenderit sed sequi ullam! Animi
        blanditiis commodi cumque, distinctio excepturi magni maxime minus quae, quos rem rerum sapiente, voluptatum?
    </div>
    <div>Beatae eos numquam omnis similique sint. Adipisci alias assumenda consequuntur delectus, dolorum ducimus earum
        eius eum, fugit illum laboriosam laudantium magni molestias nobis optio, placeat qui quibusdam quis sequi vero.
    </div>
    <div>Ad commodi cupiditate, eos ipsum, iure iusto nostrum odit placeat quas qui quis quod sint suscipit, tenetur
        voluptatibus? Blanditiis culpa debitis esse et harum minus sed. Dignissimos nostrum rerum veniam.
    </div>
    <div>A architecto aut consectetur cum, deleniti doloremque dolorum ducimus earum explicabo fuga fugiat illo illum,
        impedit iste itaque laudantium maiores necessitatibus nulla perspiciatis quas rerum saepe similique suscipit ut
        voluptate.
    </div>
    <div>A accusantium ad assumenda beatae dolor doloremque doloribus ducimus enim, et eveniet ex fugiat iste non
        perferendis similique tenetur vitae. Autem enim explicabo facere nulla pariatur recusandae repellat tempore,
        tenetur.
    </div>
    <div>Accusamus accusantium, architecto beatae consequatur distinctio eaque esse est fugiat fugit incidunt magni
        mollitia obcaecati perferendis quam quisquam reiciendis rem sapiente sint temporibus totam ullam voluptas,
        voluptatibus. A, officia, ratione.
    </div>
    <div>Distinctio fuga fugiat, illo nisi nostrum quo. Ad aliquid atque cumque cupiditate dignissimos esse et id
        inventore labore, laudantium libero maxime minima modi nisi rem rerum, saepe sed sint sunt?
    </div>
    <div>Adipisci asperiores blanditiis distinctio eaque eius eos est eum ex expedita explicabo, hic impedit in itaque
        iusto laboriosam nemo nesciunt perspiciatis sequi sit vero. Deleniti dolore itaque laborum optio sapiente!
    </div>
    <div>A alias dolorem earum exercitationem expedita impedit ipsa maiores reiciendis rerum sequi. Ab architecto
        assumenda dolor magnam minus nihil officiis similique soluta suscipit, voluptas! Ad consequatur earum molestiae
        officia quo.
    </div>
    <div>Aperiam autem commodi corporis cum delectus deleniti esse, et eveniet illum maiores molestiae nesciunt nostrum
        nulla odit possimus quas quibusdam quis quos sequi, similique soluta sunt suscipit tenetur velit voluptatibus.
    </div>
    <div>Assumenda blanditiis consectetur consequatur, dolor dolorum esse exercitationem laudantium, nam necessitatibus
        neque nostrum perspiciatis quas sequi ut veniam. Alias dignissimos fugiat fugit harum libero neque nesciunt
        nobis
        odit pariatur reiciendis?
    </div>
    <div>Adipisci, atque aut beatae consequuntur corporis cumque dicta, dolor dolorum est et eveniet ex excepturi illo
        impedit ipsa magnam nulla obcaecati odit optio perspiciatis quibusdam repellendus similique unde velit vero?
    </div>
    <div>Aut, ducimus hic nam nemo nostrum numquam quasi reiciendis sint! Amet asperiores assumenda debitis doloribus,
        earum enim est ipsum iure labore magni, necessitatibus perferendis quo rerum sequi similique sit ut!
    </div>
    <div>Facilis nam omnis voluptatum. Alias at consequatur debitis deserunt dignissimos error excepturi, fuga illum
        itaque nisi officia perferendis porro rerum tempore tenetur. Iste, molestias, numquam? Dolores incidunt quo vel
        voluptatibus!
    </div>
    <div>A alias neque quo! A ad animi architecto beatae blanditiis, cumque distinctio, dolore ea error fugiat hic in
        ipsum, molestiae obcaecati quaerat qui quod soluta tempora voluptates voluptatibus. Nisi, quas?
    </div>
    <div>Ad aperiam autem consectetur deserunt dicta distinctio dolore dolorem eius est excepturi, exercitationem
        explicabo itaque laboriosam laudantium officia provident recusandae reiciendis repellendus sapiente tempora
        temporibus unde ut voluptates. Asperiores, totam!
    </div>
    <div>Consectetur eaque iste nemo nobis non perferendis quas rem reprehenderit! Culpa delectus deserunt, minus non
        unde
        ut! Cum eaque id magnam maiores maxime, mollitia officia placeat quia quis quo ut.
    </div>
    <div>Amet atque, commodi deserunt dicta enim eum harum impedit, ipsa laboriosam numquam odit placeat quaerat qui.
        Aliquam aspernatur distinctio dolores earum, molestiae, necessitatibus nemo nisi officia provident quae repellat
        unde!
    </div>
    <div>Ad aperiam architecto at autem consectetur consequuntur deserunt ducimus enim, eos exercitationem id in
        incidunt,
        iure laboriosam laudantium molestias nihil odio optio porro possimus quas recusandae repellendus sint ullam
        voluptatum!
    </div>
    <div>Amet aut deserunt distinctio esse, est eveniet fugiat illum incidunt iusto laboriosam nihil odio officiis,
        optio
        pariatur perspiciatis possimus quo ratione rem, repellat repudiandae rerum similique sint sunt voluptatibus
        voluptatum!
    </div>
    <div>Debitis esse exercitationem explicabo hic illo odit qui quisquam soluta veniam voluptatem. Accusamus adipisci
        commodi consequatur deleniti dolor dolore dolores dolorum, illo incidunt laudantium quod sit unde ut vitae
        voluptatem!
    </div>
    <div>A, aliquam aspernatur aut delectus est exercitationem itaque labore laborum necessitatibus officiis omnis quas
        quasi quos ratione repudiandae. Blanditiis consequatur cumque eius in iusto laborum minus nobis quos
        repellendus,
        tempore.
    </div>
    <div>Ab aliquam autem culpa dignissimos ea earum in, minus porro quae vero. Ea esse ex id illum iusto obcaecati
        sapiente veniam. Consequatur eum nemo nobis quia? Consequuntur dignissimos exercitationem qui!
    </div>
    <div>Facilis id modi molestiae odit perferendis, praesentium recusandae veniam? Atque corporis enim ex expedita,
        incidunt molestiae nesciunt nobis porro quis soluta? Commodi fuga impedit nemo pariatur quo tempore vel
        voluptate.
    </div>
    <div>At consectetur deserunt dolores eaque expedita fuga harum, ipsam itaque maiores officia perspiciatis quos rerum
        voluptate voluptates voluptatibus? Asperiores dolor exercitationem facere, fugit labore minus officia
        praesentium
        quam voluptatibus voluptatum.
    </div>
    <div>Aperiam assumenda autem commodi cumque dicta error impedit ipsam libero molestiae neque nisi possimus quasi qui
        quis quo sequi, soluta suscipit tempore. Facere illum magni odio quia similique sunt voluptatibus?
    </div>
    <div>Animi, assumenda aut corporis dignissimos magnam ratione reprehenderit saepe tenetur voluptates! A consectetur
        distinctio earum facilis id incidunt natus nisi odio odit provident quas quidem, quis, saepe. Autem deleniti,
        minima.
    </div>
    <div>Adipisci alias cumque dicta ea enim error excepturi facere fuga illo impedit in incidunt ipsam ipsum laudantium
        numquam odio pariatur possimus praesentium quod ratione, rerum sapiente sed similique tempora totam?
    </div>
    <div>Aliquid architecto modi optio possimus qui quidem, recusandae sequi? Atque commodi cupiditate deserunt dolores
        eaque fuga fugiat, impedit in magni nisi porro quidem similique sint ut vel velit voluptatibus? Placeat?
    </div>
    <div>Dignissimos, ducimus, rerum. Autem blanditiis id illum laudantium nemo numquam odit soluta? At culpa distinctio
        ducimus illum impedit, inventore laborum magnam maiores minus, molestias nesciunt repellendus sapiente similique
        ullam veritatis!
    </div>
    <div>Alias aliquam aspernatur consequuntur, debitis delectus eveniet fugiat impedit in nesciunt nisi perferendis
        quidem reiciendis, reprehenderit. Accusamus adipisci amet assumenda doloremque, earum eos ipsa maxime, porro sit
        tempore veniam veritatis.
    </div>
    <div>A accusamus alias animi atque beatae cupiditate, delectus doloremque eligendi exercitationem facere, ipsum
        itaque
        laudantium, molestiae nemo non obcaecati perferendis perspiciatis qui sapiente similique sint suscipit tempora
        voluptatum. Est, et!
    </div>
    <div>Aliquam amet atque blanditiis culpa dignissimos dolore, enim est eum explicabo facere facilis hic illo impedit
        in
        ipsam itaque natus nemo, pariatur perferendis quae ratione recusandae rem repellendus soluta velit.
    </div>
    <div>Assumenda deleniti dolorem impedit ipsa, laudantium perferendis quibusdam tempora? Consequatur ipsum iusto
        magni
        non nostrum quo. Accusantium ad, assumenda beatae doloribus eaque labore possimus quaerat quidem quis
        reprehenderit
        ullam, ut.
    </div>
    <div>Ab cupiditate ducimus, et exercitationem facere id mollitia numquam ullam ut vero. Aperiam culpa delectus
        dolor,
        dolore, enim error laboriosam porro ratione reprehenderit sed sequi, voluptatem voluptatibus? Ducimus porro,
        suscipit?
    </div>
    <div>Doloribus, eum expedita magnam molestias natus necessitatibus non, perferendis quod reiciendis sequi, sunt
        tempore veniam? Ad amet animi commodi error facere ipsam maxime, pariatur quas recusandae reiciendis rem totam
        voluptatem.
    </div>
    <div>Alias consectetur dolorum sit! Accusantium aut deserunt dolore iste, laboriosam maxime nemo nesciunt quam
        reprehenderit sapiente! Culpa cum, dicta eius facilis fugiat ipsum molestiae nihil nobis praesentium
        reprehenderit
        vitae voluptatem!
    </div>
    <div>Aspernatur blanditiis deserunt, ea iste iure odit officiis quia quisquam quos ratione veritatis voluptate
        voluptatibus. Dolore eligendi minus provident quidem quis repudiandae ullam vero? Aut corporis dolorem fugit
        omnis
        rem!
    </div>
    <div>Eum exercitationem laudantium molestiae natus pariatur possimus praesentium quas quibusdam quidem repellendus,
        rerum, suscipit voluptas! Ad consequuntur eius iure laudantium libero odio quisquam sit vero, voluptates. Facere
        labore nulla provident.
    </div>
    <div>Aut beatae, culpa cumque dolorum enim expedita explicabo, in labore molestiae optio provident tenetur veniam.
        Ad
        amet beatae corporis dicta distinctio error eum illo magnam neque voluptatibus? Autem libero, minima.
    </div>
    <div>Aspernatur dignissimos facere facilis ipsam nihil nobis perferendis quo quod, totam ullam. A ab cumque dicta
        eos
        exercitationem, fugit labore modi molestiae natus nesciunt nisi nostrum, officiis praesentium reiciendis ullam!
    </div>
    <div>Autem debitis ex iusto laboriosam quidem rerum tempora voluptate voluptatem! Alias asperiores atque,
        consequatur
        consequuntur cupiditate delectus dolores ea ipsum, itaque labore magni perspiciatis porro possimus quasi quos
        vero
        voluptatum.
    </div>
    <div>Blanditiis cupiditate debitis illum magnam praesentium? Asperiores beatae consequatur cum deserunt eaque
        expedita
        facilis harum in incidunt, ipsa laborum laudantium neque, odio porro possimus, quas recusandae reprehenderit
        similique soluta voluptatem.
    </div>
    <div>Autem commodi consequuntur, corporis culpa cupiditate distinctio dolorem dolorum eaque eius enim et, explicabo
        facilis fuga fugiat illum impedit ipsum molestias nisi omnis perferendis quam quisquam velit voluptate?
        Accusamus,
        saepe!
    </div>
    <div>A asperiores at culpa dicta dolor harum iusto perspiciatis quibusdam suscipit ullam? Alias inventore iusto
        minima
        nostrum, quis saepe ut vero? A aliquid aperiam esse impedit quae quaerat quibusdam similique.
    </div>
    <div>Accusantium debitis deleniti, doloribus eius et excepturi illum, magni maiores minima nam, necessitatibus
        officia
        praesentium quia soluta tempore! Ad eius minus molestias pariatur quae similique totam vitae. Amet distinctio,
        vitae.
    </div>
    <div>Asperiores blanditiis culpa dolore excepturi hic illo incidunt minima, molestias nam necessitatibus neque omnis
        optio porro quam quasi quibusdam quo repellat rerum sed sunt tempora tempore totam ullam unde veritatis.
    </div>
    <div>Adipisci aut autem corporis cumque dolor dolore eaque eos est harum incidunt ipsam ipsum itaque iusto magnam
        molestias, necessitatibus, neque perspiciatis quasi qui quo recusandae repellat repudiandae sunt voluptates
        voluptatibus!
    </div>
    <div>Ad commodi magnam nisi officia quaerat, repudiandae temporibus vel voluptatem? Aliquam, asperiores aspernatur
        atque eaque, eligendi est hic ipsam labore mollitia nam reiciendis rem repellat, repudiandae suscipit ut velit
        voluptates?
    </div>
    <div>Adipisci culpa est inventore ipsam quae repellendus repudiandae sunt temporibus. Ducimus, laudantium
        voluptatibus? Accusamus amet assumenda autem consectetur cum debitis doloribus et exercitationem incidunt
        laborum
        mollitia, natus quasi reprehenderit soluta?
    </div>
    <div>A blanditiis eos incidunt inventore ipsum iusto officia optio qui repellat repudiandae. Ab, et facere harum hic
        placeat provident quaerat quisquam saepe suscipit ut. Architecto aspernatur dicta fugit nobis quasi!
    </div>
    <div>Animi aspernatur at atque aut, cum ducimus ea ex ipsa ipsum minus nulla quos rem, rerum sint tempora vero vitae
        voluptatibus. Accusantium aspernatur deleniti fuga labore provident quisquam, rerum totam.
    </div>
    <div>Consequatur eius iste iusto odit repellat repellendus, reprehenderit repudiandae vel voluptatum! Corporis,
        dolor
        error esse eveniet excepturi fugit impedit incidunt, iste itaque iure magni maiores officia perferendis placeat
        quam
        suscipit.
    </div>
    <div>Cupiditate fugit impedit incidunt optio, possimus, quae quis reiciendis rem sint tempora tenetur veniam vitae,
        voluptate! Amet, assumenda atque deleniti, dignissimos, doloribus eaque earum natus recusandae saepe sapiente
        sint
        voluptas?
    </div>
    <div>Aut dignissimos minima optio sint. Ad aspernatur at corporis, deleniti deserunt doloremque, doloribus ea earum
        id
        incidunt itaque magnam perferendis quisquam quo quod quos, repellat repudiandae sit temporibus vel voluptatum?
    </div>
    <div>Ab adipisci error illum magni necessitatibus rem saepe soluta. A ab adipisci animi aspernatur consectetur
        consequatur, error fuga illo libero, natus perspiciatis possimus quidem quis reiciendis saepe, tempore vel
        velit!
    </div>
    <div>Accusantium ad aperiam atque beatae consectetur, cumque, deserunt dolore eaque enim et exercitationem fuga
        fugiat
        hic in ipsa iste iure minus molestiae nisi numquam optio quibusdam repellendus, sit temporibus ullam.
    </div>
    <div>Distinctio harum iste quas vel voluptates. Accusamus ad, aliquam, dolorum earum eos, id ipsam magnam obcaecati
        quas quidem quisquam quo repellat saepe sunt temporibus. Blanditiis enim nam nulla sed voluptatem.
    </div>
    <div>A adipisci architecto aspernatur dolorum error exercitationem nam, officia omnis recusandae sed! Beatae
        cupiditate, eligendi enim esse ex laborum nihil odit omnis porro quasi quidem sapiente sed temporibus velit
        voluptate.
    </div>
</div>
</body>
</html>